<template>
	<view class="myindent_card" @click="clickHouseCard()" >
		<view class="icon">
			<view class="">
				<image class="image" src="@/static/images/deliveryorder/inside.png" mode=""></image>
			</view>
		</view>
		<view class="">
			<view class="details">
				<view class="tag">取物站点</view>
				<view>{{myInfo.task_start_subarea+'-'+myInfo.task_start_floor+'-'+myInfo.task_start_station}}</view>
			</view>
			<view class="details">
				<view class="tag">送物站点</view>
                <view>{{myInfo.task_end_subarea+'-'+myInfo.task_end_floor+'-'+myInfo.task_end_station}}</view>
			</view>
			<view class="details">
				<view class="tag">下单时间</view>
				<view class="time">{{myInfo.created_at | timeFormat('YYYY-MM-DD HH:mm')}}</view>
			</view>

		</view>
		<view  v-if="myInfo.task_state === 2">
			<view class="state_font">
				已完成
			</view>
			<image class="state" src="@/static/images/deliveryorder/0.png" mode=""></image>
		</view>
		<view  v-else-if="myInfo.task_state === 0">
			<view class="state_font">
				待配送
			</view>
			<image class="state" src="@/static/images/deliveryorder/1.png" mode=""></image>
		</view>
		<view  v-else-if="myInfo.task_state === 1">
			<view class="state_font">
				配送中
			</view>
			<image class="state" src="@/static/images/deliveryorder/2.png" mode=""></image>
		</view>
		<view  v-else-if="myInfo.task_state === 3">
			<view class="state_font">
				已取消
			</view>
			<image class="state" src="@/static/images/deliveryorder/3.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		name: "MyIndentCard",
		props: {
			myInfo: Object,
		},
		methods:{
			clickHouseCard(){
				this.$emit('clickHouseCard')
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.myindent_card {
		display: flex;
		// justify-content: space-between;
		position: relative;
		background-color: #FFFFFF;
		box-sizing: border-box;
		padding: 20px 30rpx 8px 30rpx;
		margin-top: 5px;
	
		.icon {
			width: 120rpx;
			box-sizing: border-box;
			text-align: center;
			margin-right: 40rpx;
	
			.image {
				margin-top: 8px;
				width: 100rpx;
				height: 100rpx;
				border-radius: 50rpx;
			}
		}
	
		.details {
			display: flex;
			font-size: 12px;
			color: #394954;
			margin-bottom: 12px;
	
			.tag {
				margin-right: 30rpx;
				color: #999999;
			}

				
			text{
				margin-right: 30rpx;
			}
		}
	
		.state_font {
			font-size: 24rpx;
			position: absolute;
			top: 12px;
			right: 0;
			width: 100rpx;
			height: 40rpx;
			z-index: 1;
			line-height: 40rpx;
			text-align: center;
			color: #FFFFFF;
		}
		.state {
			position: absolute;
			top: 12px;
			right: 0;
			width: 100rpx;
			height: 40rpx;
		}
	}
</style>
